<div class="login-page col center-span middle-span">
  <video autoplay="autoplay" loop class="bgvideo">
    <source src="/assets/videos/bgvideo.webm" type="video/webm">
    <source src="/assets/videos/bgvideo.webm" type="video/webm">
  </video>
  <form #loginForm="ngForm" (ngSubmit)="loginForm.controls.password.markAsTouched()||loginForm.form.valid && onSubmit(loginForm.form)" class="login-form col center-span middle-span">
    <div class="from-title">用户登录</div>
    <div>
      <mdl-textfield  #username="ngModel" [class.is-invalid]="!username.valid&&!username.untouched" name="username" type="text" label="用户名" required autofocus floating-label  maxlength="10" [(ngModel)]="user.username"></mdl-textfield>
    </div>
    <div>
      <mdl-textfield disableNativeValidityChecking  #password="ngModel" [class.is-invalid]="!password.valid&&!password.untouched" name="password" type="password" label="密码" floating-label required maxlength="10" error-msg="密码不能为空" [(ngModel)]="user.password"></mdl-textfield>
    </div>
    <div>
      <button type="button" mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple>
        注册
      </button>
      <button  mdl-button mdl-button-type="raised" mdl-colored="primary" mdl-ripple>
        登录
      </button>
    </div>
    <div>
        <a herf="#">我觉得我迷路了</a>
    </div>
  </form>
</div>
